如何创建一个简易的markdown在线编辑器

项目演示markdown-editor
教程地址markdown-editor

前提准备

• npm
• bower
• node 0.12.x
• angular 1.4x

技术栈

• Angular.js [动态更新数据]
• marked [转义markdown语法]
• highlight.js [高亮代码]
• less [管理css]
• gulp [自动化项目]

概要

通过github-pages免费申请一个页面

修改项目结构

...

打开项目，将原来的目录结构删掉，重新配置如下

    ├── front-end
    │   ├── api
    │   │   └── app.js
    │   └── assets
    │       ├── js
    │       │   └── customer.js
    │       └── styles
    │           └── customer.css
    └── index.html

 - api里装angular的代码
 - assets里是资源文件
 - .gitignore是告诉git要忽略的文件

 ...

使用gulp自动化项目

编译less，压缩css，生成map文件

    gulp.task('lessCSS', function () {
        var combined = combine.obj([
            gulp.src(path.lessPath),
            plumber(),
            sourcemaps.init(),
            less(),
            minifyCSS(),
            sourcemaps.write('./maps'),
            gulp.dest(path.destLessPath),
            livereload()
        ]);
        combined.on('error',log);
    });

压缩js，生成map文件

    gulp.task('uglifyJS', function () {
        var combined = combine.obj([
            gulp.src(path.jsPath),
            plumber(),
            sourcemaps.init(),
            rename('customer.min.js'),
            uglify(),
            sourcemaps.write('./maps'),
            gulp.dest(path.destJSPath),
            livereload()
        ]);
        combined.on('error',log);
    });

合并angular，重命名，压缩后，生成map文件

    gulp.task('uglifyAngularJS', function () {
        var combined = combine.obj([
            gulp.src(path.angularJSPath),
            plumber(),
            sourcemaps.init(),
            concat('all.js'),
            gulp.dest(path.destAngularJSPath),
            rename('all.min.js'),
            uglify(),
            sourcemaps.write('./maps'),
            gulp.dest(path.destAngularJSPath),
            livereload()
        ]);
        combined.on('error',log);
    });

默认执行的任务

    gulp.task('default',['uglifyAngularJS','uglifyJS','lessCSS','watch']);

使用less管理css

@charset:'utf-8';

@riceWhite:#F9F9F5;

@333:#333;
@555:#555;
@ccc:#ccc;
@eee:#eee;
@white:#fff;

.box-sizing{
            box-sizing:border-box;
       -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;  
}

.height(@height) {
    height: @height;
}
.width(@width) {
    width: @width;
}
.padding(@padding) {
    padding: @padding;
}
.margin(@margin) {
    margin: @margin;
}
.float(@float) {
    float: @float;
}

.base{
    .margin(0);
    .padding(0);
    .box-sizing;
}

.fill{
    .height(100%);
    .width(100%);
    .box-sizing;
}

html,body{
    .base;
    .fill;
    background-color: @riceWhite;
}

使用angular marked 和 highlight 完成核心功能

初始化angular应用

var app = angular.module('app',['ngSanitize']);

配置marked

marked.setOptions({
    renderer: new marked.Renderer(),
    gfm: true,
    tables: true,
    breaks: false,
    pedantic: false,
    sanitize: false,
    smartLists: true,
    smartypants: false,
    highlight: function (code) {
        return hljs.highlightAuto(code).value;
    }
});

动态显示结果，所编即所得

app
    .controller('MarkdownController', ['$scope', function ($scope) {
        $scope.inputText = '';

        $scope.$watch('inputText', function(current) {
            $scope.outputText = marked(current);
        });

    }])

优化tab键

优化自动下移

持久化存储markdown内容

教程地址markdown-editor